<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<div class="easyui-layout" data-options="fit:true,border:false" >
			<div data-options="region:'north',border:false">
			<div  class="queryContent" style="height: 52px;">
				<table class="queryTable" >
					<tbody>
						<tr>
							<th>节点名称:</th>
							<td colspan="3">
							<input type="text" id="approveNodeName" class="easyui-validatebox" maxlength="25" size="60"></input></td>
						</tr>
						<tr>
							<th>审批方式:</th>
							<td><input type="radio" id="composition" name="selMethod" value="composition" title="所有人员审批通过后，该节点才审批结束"/>&nbsp;组合&nbsp;<input type="radio" id="aggregation" checked="checked" name="selMethod" value="aggregation" title="有一个人员审批通过后，该节点就审批结束"/>&nbsp;聚合</td>
							<th>审批期限:</th>
							<td>
							<input type="text" id="approveLimit" class="easyui-validatebox" name="approveLimit" maxlength="10" ></input>&nbsp;单位（工作日）</td>
						</tr>
					</tbody>
				</table>
			</div>
			</div>
			<div data-options="region:'center',border:true">
		    <table id="userListTable" class="easyui-datagrid" 
				data-options="singleSelect:false,toolbar:'#usertb',rownumbers:true,fit:true,fitColumns:true,border:false"}>
				<thead>
					<tr>
						<th data-options="field:'id',checkbox:true"></th>
						<th data-options="field:'name',width:50,title:'名称'"></th>
						<th data-options="field:'deptName',width:50,title:'所属'"></th>
						<th data-options="field:'type',width:50,title:'类型',formatter:function(value,row){
							if(value == 'user'){
								return '人员';
							}else{
								return '角色';
							}
						}"></th>
					</tr>
				</thead>
			</table>
			<div id="usertb" style="display: none;">
				<div>
					<!-- <a href="javascript:void(0);" onclick="openSelPerson();" class="easyui-linkbutton" iconCls="icon-add" plain="true">添加人员</a> -->
					<a href="javascript:void(0);" onclick="openSelRole();" class="easyui-linkbutton" iconCls="icon-add" plain="true">添加角色</a>
					<a href="javascript:void(0);" onclick="deleteUserData();" class="easyui-linkbutton" iconCls="icon-remove" plain="true">删除</a>
				</div>
			</div>
		</div>
		</div>
		<div id='userTreeTool' style='padding:5px;font-size: 12px;'>
			<div style='margin: 5px;'>节点名称 <input type='text' id='selUserTreeName' name='treeName'/>&nbsp;&nbsp;<a href='javascript:void(0);' onclick='selUserTree();' class='easyui-linkbutton' >查询</a>
			</div>
		</div>
		<div id="userTreeDialog" class="easyui-dialog" title="人员选择树" style="width:320px;height:382px;padding:8px;padding-top: 0px;" 
			data-options="iconCls: 'icon-user',method:'post',closed:true,modal: true,toolbar:'#userTreeTool',
			buttons: [{	text:'选择',	iconCls:'icon-ok',	handler:function(){getSelectUserNode();	}},
			{	text:'取消',	iconCls:'icon-cancel',	handler:function(){		$('#userTreeDialog').dialog('close');	}}]">
			<ul id="userTree" class="easyui-tree" data-options="url:'',method:'get',animate:true,onlyLeafCheck:true,checkbox:true,
				loadFilter:function(data){ids=data.selIds;return data.tree;},
				formatter:function(node){	
					if(ids != undefined){		
						for(var i=0;i<ids.length;i++){			
							if(node.id == ids[i]){				
							return '<span style=\'color:red;font-weight: bold;\'>'+node.text+'</span>';			
						}		
					}	
				}	return node.text;}">
			</ul>
		</div>
		<div id='deptTreeTool' style='padding:5px;font-size: 12px;'>
			<div style='margin: 5px;'>节点名称 <input type='text' id='selDeptTreeName' name='treeName'/>&nbsp;&nbsp;<a href='javascript:void(0);' onclick='selDeptTree();' class='easyui-linkbutton' >查询</a>
			</div>
		</div>
		<div id="deptDialog" class="easyui-dialog" title="选择角色" style="width:320px;height:382px;padding:0px;padding-top: 0px;" 
			data-options="iconCls: 'icon-dept',method:'post',closed:true,modal: true,
			buttons: [{	text:'选择',	iconCls:'icon-ok',	handler:function(){getSelectDeptNode();	}},
			{	text:'取消',	iconCls:'icon-cancel',	handler:function(){		$('#deptDialog').dialog('close');	}}]">
			<table id="rolesTable" class="easyui-datagrid" style="width:100%;height:auto"
					data-options="
						iconCls: 'icon-edit',
						pagination:true,
						fit:true,border:false,
						url:'/comm-work-flow-server/workflow/workflowinfo/findRoles'
					">
				<thead>
					<tr>
						<th data-options="field:'id',width:20,checkbox:true"> </th>
						<th data-options="field:'name',width:138">角色名称</th>
						<th data-options="field:'code',width:140">角色编码</th>
					</tr>
				</thead>
			</table>
		</div>
		<script>
			init();
			function init(){
				var approveNode = flow.$nodeData[nodeId];
				$('#approveNodeName').val(approveNode.name)
				$('#userListTable').datagrid({data:approveNode.approvers});
				var selMethod = approveNode.selMethod;
				$('#'+selMethod).attr("checked",true);
				$('#approveLimit').val(approveNode.approveLimit)
			}
			Array.prototype.remove=function(dx) { 
			    if(isNaN(dx)||dx>this.length){return false;} 
			    for(var i=0,n=0;i<this.length;i++) { 
			        if(this[i].id!=this[dx].id) { 
			            this[n++]=this[i]
			        } 
			    } 
			    this.length-=1 
			} 
			function deleteUserData(){
				var data = $('#userListTable').datagrid('getData');
				var rows = data.rows;
				var records = $('#userListTable').datagrid('getSelections');
				if(records.length < 1){
					$.messager.alert('提示',"请选择记录！",'info');
				}else{
					var r;
					for(var i=0;i<records.length;i++){
						r = records[i];
						deleteRows(rows,r);
					}
				}
				$('#userListTable').datagrid({data:rows});
			}
			
			function deleteRows(rows,r){
				var sign = 0;
				for(var i=0;i<rows.length-1;i++){
					if(rows[i].id == r.id){
						sign = 1;
					}
					if(sign == 1){
						rows[i] = rows[i+1];
					}
				}
				rows.pop();
			}
			function openSelRole(){
				var data = $('#userListTable').datagrid('getData');
				var selectId;
				if(data.rows.length > 0) {
					var rows = data.rows;
					for(var i=0;i<rows.length;i++){
						if(i == 0){
							selectId = rows[i].id;
						} else {
							selectId +="," + rows[i].id;
						}
					}
				}
				$("#deptDialog").dialog('open');
				if(selectId == undefined){
					$('#deptTree').tree('options').url='/dept/getDeptTreeDialog';
				}else{
					$('#deptTree').tree('options').url='/dept/getDeptTreeDialog?deleteIds='+selectId;
					$('#deptTree').tree({onLoadSuccess:function(node, data){
						var node = $('#deptTree').tree('find', selectId);
						if(node){
							$('#deptTree').tree('expand', node.target).tree('select', node.target);
						}
					}});
				}
				$('#deptTree').tree('reload');
			}
			function openSelPerson(){
				var data = $('#userListTable').datagrid('getData');
				var selectId;
				if(data.rows.length > 0) {
					var rows = data.rows;
					for(var i=0;i<rows.length;i++){
						if(i == 0){
							selectId = rows[i].id;
						} else {
							selectId +="," + rows[i].id;
						}
					}
				}
				$("#userTreeDialog").dialog('open');
				if(selectId == undefined){
					$('#userTree').tree('options').url='/user/getUserTree';
				}else{
					$('#userTree').tree('options').url='/user/getUserTree?selectIds='+selectId;
					$('#userTree').tree({onLoadSuccess:function(node, data){
						var node = $('#userTree').tree('find', selectId);
						if(node){
							$('#userTree').tree('expand', node.target).tree('select', node.target);
						}
					}});
				}
				$('#userTree').tree('reload');
			}
			var ids;
			function getSelectUserNode(){	
				var nodes = $('#userTree').tree('getChecked');
				var nodeNames = '';
				var nodeIds = '';
				var nodeData = [];
				var nodeUser;
				for(var i=0; i<nodes.length; i++){
					nodeUser = {};
					nodeUser.id = nodes[i].id;
					nodeUser.name = nodes[i].text;
					nodeUser.deptName = nodes[i].exchangeInfo;
					nodeUser.type = 'user';
					nodeData.push(nodeUser);
				}
				$('#userListTable').datagrid({data:nodeData});
				$('#userTreeDialog').dialog('close');
			}
			
			function getSelectDeptNode(){
				var nodes = $('#rolesTable').datagrid('getSelections');
				var nodeData = [];
				var nodeUser;
				for(var i=0; i<nodes.length; i++){
					nodeUser = {};
					nodeUser.id = nodes[i].id;
					nodeUser.name = nodes[i].name;
					nodeUser.type = 'dept';
					nodeData.push(nodeUser);
				}
				$('#userListTable').datagrid({data:nodeData});
				$('#deptDialog').dialog('close');
			}
			
			function selUserTree(){	
				$('#userTree').tree('options').url='/user/getUserTree?nodeName='+encodeURI($('#selUserTreeName').val());	
				$('#userTree').tree('reload');
			}
		</script>